<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
        <link rel="stylesheet" href="../src/hans-ui.css">
        <title>字体图标</title>
        <style>
          .fa{
              width: 1.5rem;
              height: 1.5rem;
              line-height: 1.5rem;
              font-size: 1.2rem;
          }
          .fa-code{
            color: blue;
          }
          .fa-info{
            background: #666;
            color: #fff;
            border-radius: 50%;
          }
          /* 大图标 */
          .fa-check {
              display: block;
              margin: 0 auto;
              width: 6rem;
              height: 6rem;
              line-height: 6rem;
              font-size: 3.5rem;
              border-radius: 50%;
              background: #09BB07;
              color: #fff;
          }
        </style>
    </head>
    <body>
        <!-- 内容区 -->
        <i class="fa fa-address-book"></i>

        <h2>更改图标样式：</h2>
        <div>
            <i class="fa fa-code fa-spin"></i>
            <i class="fa fa-info"></i>
            <i class="fa fa-check fa-spin"></i>
        </div>
    </body>
</html>